<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>Document</title>
        <style>
            header{
                position: fixed;
                height: 50px;
                top: 0;
                left: 0;
                right: 0;
                background-color: #f0c;
            }
            footer{
                position: fixed;
                height: 34px;
                bottom: 0;
                left: 0;
                right: 0;
                background-color: #fc0;
            }
            main{
                margin-top: 50px;
                margin-bottom: 34px;
                height: 2000px;
            }
        </style>
    </head>
    <body>
        <header>头部</header>
        <main>主要内容</main>
        <footer>底部</footer>
        <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
        <script>
            var oHeight = $(document).height(); //浏览器当前的高度
               
               $(window).resize(function(){
             
                    if($(document).height() < oHeight){
                     
                    $("#footer").css("position","static");
                }else{
                     
                    $("#footer").css("position","absolute");
                }
                    
               });
        </script>
    </body>
</html>